<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            position: fixed;
            padding: 5px;
            width: 320px;
            height: 400px;
            right: 5px;
            bottom: 5px;
            background-color: gainsboro;
        }

        .wrap .ad {
            display: flex;
            justify-content: space-between;
        }

        #dateBox {
            display: flex;
        }

        .content {
            padding-top: 20px;
        }

        .content p {
            margin-top: 20px;
        }
        #adBox{
            display: none;
        }
    </style>
</head>
<body>
    <div class="wrap" id="adBox">
        <div class="ad">
            <div class="title">距离广告关闭还有<span id="count">10</span>秒</div>
            <div class="close" id="close">X</div>
        </div>
        <div class="content">
            <!-- 静态页面 -->
            <p id="dateBox"></p>
            <p id="weekBox"></p>
            <p id="timeBox"></p>
        </div>
    </div>
    <script>
     // 0. 页面打开5秒后小广告出来
    // 1. 倒计时10秒后关闭，关闭后5s自动打开    （10秒倒计时）
    // 2. 点击 X  直接关闭   ，关闭后5s自动打开 （10秒倒计时）
    var closeA=document.getElementById("close")
    var adbox=document.getElementById("adBox")
    var countspan=document.getElementById("count")
    var time
function djs(){
    adbox.style.display="block"
    countspan.innerHTML=10
    time=setInterval(fn,1000)
    var count=10;
    function fn(){       
        count--
        if(count<=0){
            clearInterval(time)
            adbox.style.display="none"
            setTimeout(function(){
                djs()
            },5000)
        }
     countspan.innerHTML=count
    }
}
// djs()
setTimeout(djs,5000)
    closeA.onclick=function(){
        clearInterval(time)
        adbox.style.display="none"
        setTimeout(function(){
            djs()
        },5000)
    }
    </script>
</body>
</html>